<template>
  <div class="classroom">
    <el-card shadow="always">
      <el-form :model="query" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="区域">
              <el-select v-model="query.areaCode" placeholder="请选择单位所属区域">
                <el-option
                  v-for="item in regionList"
                  :key="item.areaCode"
                  :label="item.areaName"
                  :value="item.areaCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="主体责任">
              <el-select
                v-model="query.mainResponsibilityType"
                collapse-tags
                multiple
                clearable
                placeholder="请选择主体责任类型"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in [
                    {
                      label: '大型餐饮服务企业',
                      value: '大型餐饮服务企业',
                    },
                    {
                      label: '中型餐饮服务企业',
                      value: '中型餐饮服务企业',
                    },
                    {
                      label: '大型食品销售企业',
                      value: '大型食品销售企业',
                    },
                    {
                      label: '中型食品销售企业',
                      value: '中型食品销售企业',
                    },
                    {
                      label: '托幼机构食堂(用餐人数300以上)',
                      value: '托幼机构食堂(用餐人数300以上)',
                    },
                    {
                      label: '学校食堂(用餐人数500以上)',
                      value: '学校食堂(用餐人数500以上)',
                    },
                    {
                      label: '其他学校食堂（含托幼机构，需总监）',
                      value: '其他学校食堂（含托幼机构，需总监）',
                    },

                    {
                      label: '用餐（供餐）1000人以上的单位',
                      value: '用餐（供餐）1000人以上的单位',
                    },
                    {
                      label: '网络平台（需设置总监）',
                      value: '网络平台（需设置总监）',
                    },

                    {
                      label: '食用农产品批发市场',
                      value: '食用农产品批发市场',
                    },
                    {
                      label: '其他企业(无需设置总监)',
                      value: '其他企业(无需设置总监)',
                    },
                  ]"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="getList()">查询</el-button>
          </el-col>
          <el-col :span="2">
            <el-button @click="exportTable()">导出</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="areaCode" label="地区"> </el-table-column>
        <el-table-column label="三类人(落实情况)" align="center">
          <el-table-column prop="personInCharge" label="负责人"> </el-table-column>
          <el-table-column prop="foodDirector" label="食安总监"> </el-table-column>
          <el-table-column prop="foodSafetyOfficer" label="食安员"> </el-table-column>
        </el-table-column>
        <el-table-column label="三件事(已落实主体责任企业数)" align="center">
          <el-table-column prop="dailyControl" label="日管控"> 

               <template slot-scope="scope">
                 <el-tooltip class="item" effect="dark" :content="`已完成${scope.row.dailyControl}家`" placement="top">
      <el-tag type="success">{{ scope.row.dailyControl }}</el-tag>
    </el-tooltip>
          
          </template>

          </el-table-column>
          <el-table-column prop="weeklyTroubleshooting" label="周排查"> 
                <template slot-scope="scope">
                 <el-tooltip class="item" effect="dark" :content="`已完成${scope.row.weeklyTroubleshooting}家`" placement="top">
      <el-tag type="success">{{ scope.row.weeklyTroubleshooting }}</el-tag>
    </el-tooltip>
          
          </template>
          </el-table-column>
          <el-table-column prop="monthlyScheduling" label="月调度"> 
                   <template slot-scope="scope">
                 <el-tooltip class="item" effect="dark" :content="`已完成${scope.row.monthlyScheduling}家`" placement="top">
      <el-tag type="success">{{ scope.row.monthlyScheduling }}</el-tag>
    </el-tooltip>
          
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="三本账(落实次数)" align="center">
          <el-table-column prop="dailyControlFrequency" label="日记录">
                 <template slot-scope="scope">
                 <el-tooltip class="item" effect="dark" :content="`共计${scope.row.dailyControlFrequency}次`" placement="top">
      <el-tag type="success">{{ scope.row.dailyControlFrequency }}</el-tag>
    </el-tooltip>
          
          </template> </el-table-column>
          <el-table-column prop="weeklyTroubleFrequency" label="周报告">
                 <template slot-scope="scope">
                 <el-tooltip class="item" effect="dark" :content="`共计${scope.row.weeklyTroubleFrequency}次`" placement="top">
      <el-tag type="success">{{ scope.row.weeklyTroubleFrequency }}</el-tag>
    </el-tooltip>
          
          </template>
          </el-table-column>
          <el-table-column prop="monthlyFrequency" label="月纪要"> 
                 <template slot-scope="scope">
                 <el-tooltip class="item" effect="dark" :content="`共计${scope.row.monthlyFrequency}次`" placement="top">
      <el-tag type="success">{{ scope.row.monthlyFrequency }}</el-tag>
    </el-tooltip>
          
          </template>
          </el-table-column>
          <el-table-column prop="tobeRectifiedTotal" label="待整改记录">
             <template slot-scope="scope">
                 <el-tooltip class="item" effect="dark" :content="`待整改${scope.row.tobeRectifiedTotal}次`" placement="top">
      <el-tag type="success">{{ scope.row.tobeRectifiedTotal }}</el-tag>
    </el-tooltip>
          
          </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="主体总数" align="center">
          <el-table-column prop="enterpriseTotal" label="主体责任企业数">
          </el-table-column>
          <el-table-column prop="inspectorGeneral" label="应设总监企业数">
          </el-table-column>
          <el-table-column prop="stopInspectorGeneral" label="已设总监企业数">
          </el-table-column>
          <el-table-column prop="stopMonthCompletion" label="己月调度企业数">
          </el-table-column>
        </el-table-column>

        <!-- <el-table-column
          label="总监企业数"
          prop="numberOfDirectors"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column
          label="日管控完成率"
          prop="dayCompletionRate"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.dayCompletionRate }}%
          </template>
        </el-table-column>
        <el-table-column
          label="周排查完成率"
          prop="weekCompletionRate"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.weekCompletionRate }}%
          </template>
        </el-table-column>
        <el-table-column
          label="月调度完成率"
          prop="monthCompletionRate"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.monthCompletionRate }}%
          </template>
        </el-table-column>
        <el-table-column label="明确率" prop="clarificationRate" align="center">
          <template slot-scope="scope">
            {{ scope.row.clarificationRate }}%
          </template>
        </el-table-column> -->
      </el-table>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="region"
        v-show="false"
      >
        <el-table-column prop="areaCode" label="地区"> </el-table-column>
        <el-table-column label="三类人(落实情况)" align="center">
          <el-table-column prop="personInCharge" label="负责人"> </el-table-column>
          <el-table-column prop="foodDirector" label="食安总监"> </el-table-column>
          <el-table-column prop="foodSafetyOfficer" label="食安员"> </el-table-column>
        </el-table-column>
        <el-table-column label="三件事(已落实主体责任企业数)" align="center">
          <el-table-column prop="dailyControl" label="日管控"> </el-table-column>
          <el-table-column prop="weeklyTroubleshooting" label="周排查"> </el-table-column>
          <el-table-column prop="monthlyScheduling" label="月调度"> </el-table-column>
        </el-table-column>
        <el-table-column label="三本账(落实次数)" align="center">
          <el-table-column prop="dailyControlFrequency" label="日记录"> </el-table-column>
          <el-table-column prop="weeklyTroubleFrequency" label="周报告">
          </el-table-column>
          <el-table-column prop="monthlyFrequency" label="月纪要"> </el-table-column>
          <el-table-column prop="tobeRectifiedTotal" label="待整改记录">
          </el-table-column>
        </el-table-column>

        <el-table-column label="主体总数" align="center">
          <el-table-column prop="enterpriseTotal" label="主体责任企业数">
          </el-table-column>
          <el-table-column prop="inspectorGeneral" label="应设总监企业数">
          </el-table-column>
          <el-table-column prop="stopInspectorGeneral" label="已设总监企业数">
          </el-table-column>
          <el-table-column prop="stopMonthCompletion" label="己月调度企业数">
          </el-table-column>
        </el-table-column>

        <!--
        <el-table-column
          label="总监企业数"
          prop="numberOfDirectors"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column
          label="日管控完成率"
          prop="dayCompletionRate"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.dayCompletionRate }}%
          </template>
        </el-table-column>
        <el-table-column
          label="周排查完成率"
          prop="weekCompletionRate"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.weekCompletionRate }}%
          </template>
        </el-table-column>
        <el-table-column
          label="月调度完成率"
          prop="monthCompletionRate"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.monthCompletionRate }}%
          </template>
        </el-table-column>
        <el-table-column label="明确率" prop="clarificationRate" align="center">
          <template slot-scope="scope">
            {{ scope.row.clarificationRate }}%
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { exportTb } from "@/utils/XLSX";
import { mainResponsibilityStatistics } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
    if (this.$route.query.code) {
      this.query.areaCode = this.$route.query.code;
    } else {
      this.query.areaCode = "320505000000";
    }
    this.findListByParentCode();
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      regionList: [],
      query: {
        areaCode: "",
        mainResponsibilityType: [],
        labelName: "总监企业",
      },
      tableData: [],
    };
  },
  // 方法
  methods: {
    findListByParentCode() {
      this.$http
        .findListByParentCode({
          parentCode: this.query.areaCode,
        })
        .then((res) => {
          this.regionList = res.data;
        });
    },
    async getList() {
      let { data } = await mainResponsibilityStatistics(this.query);
      this.tableData = data;
    },
    exportTable() {
      let time = new Date().getTime();
      exportTb(".region", `导出${time}`);
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped></style>
